<template>
  <el-container id="dataset_container" style="height:100%;overflow: hidden;">
    <el-main>
      <div class="dataset-tree-node" :style="{height: height + 'px'}">
        <el-scrollbar style="height: 100%">
          <div class="el-tree-node__children">
            <div v-for="datasource in datasources" class="el-tree-node is-expanded is-current is-focusable">
              <div class="el-tree-node__content" @click="expand(datasource)" @contextmenu.prevent="menu($event,datasource,null)">
                <span :class="datasource.expanded ? 'expanded el-tree-node__expand-icon el-icon-caret-right' : 'el-tree-node__expand-icon el-icon-caret-right' " />
                <span class="el-tree-node__label">{{ datasource.name }}</span>
              </div>
              <el-collapse-transition>
                <div v-show="datasource.expanded" class="el-tree-node__children">
                  <div v-for="dataset in datasource.datasets" class="el-tree-node is-focusable">
                    <div class="el-tree-node__content" style="padding-left: 18px;" @click="expand(dataset)" @contextmenu.prevent="menu($event,datasource,dataset)">
                      <span :class="dataset.expanded ? 'expanded el-tree-node__expand-icon el-icon-caret-right' : 'el-tree-node__expand-icon el-icon-caret-right' " />
                      <span class="el-tree-node__label">{{ dataset.name }}</span>
                    </div>
                    <el-collapse-transition>
                      <div v-show="dataset.expanded" class="el-tree-node__children">
                        <div v-for="field in dataset.fields" class="el-tree-node is-focusable">
                          <div class="el-tree-node__content" style="padding-left: 36px;">
                            <span class="el-tree-node__expand-icon el-icon-rank" />
                            <span class="el-tree-node__label" :dataset="dataset.name" draggable="true" @dblclick="addField(dataset.name, field.name)">{{ field.name }}</span>
                          </div>
                        </div>
                      </div>
                    </el-collapse-transition>
                  </div>
                </div>
              </el-collapse-transition>
            </div>
          </div>
        </el-scrollbar>
        <!-- <div class="el-tree-node__children">
          <div v-for="dataset in datasets" class="el-tree-node is-expanded is-current is-focusable">
            <div class="el-tree-node__content" @click="expand(dataset)" @contextmenu.prevent="menu($event,dataset)">
              <span :class="dataset.expanded ? 'expanded el-tree-node__expand-icon el-icon-caret-right' : 'el-tree-node__expand-icon el-icon-caret-right' " />
              <span class="el-tree-node__label">{{ dataset.name }}</span>
            </div>
            <el-collapse-transition>
              <div v-show="dataset.expanded" class="el-tree-node__children">
                <div v-for="field in dataset.fields" class="el-tree-node is-focusable">
                  <div class="el-tree-node__content" style="padding-left: 18px;">
                    <span class="el-tree-node__expand-icon el-icon-rank" />
                    <span class="el-tree-node__label" :dataset="dataset.name" draggable="true">{{ field.name }}</span>
                  </div>
                </div>
              </div>
            </el-collapse-transition>
          </div>
        </div> -->
      </div>
    </el-main>
    <sqlDataSetDialog :sql-data-set-value="sqlDataSetValue" :refresh="init" />
    <vue-context ref="menu">
      <li style="font-size: 14px;">
        <el-link :underline="false" @click.prevent="addDataSet()"><i class="el-icon-circle-plus-outline" /> 新建数据集</el-link>
        <el-link :disabled="!dataset" :underline="false" @click.prevent="editDataSet()"><i class="el-icon-edit" /> 编辑数据集</el-link>
        <el-link :disabled="!dataset" :underline="false" @click.prevent="removeDataSet()"><i class="el-icon-refresh" /> 刷新数据集</el-link>
        <el-link :disabled="!dataset" :underline="false" @click.prevent="removeDataSet()"><i class="el-icon-remove-outline" /> 删除数据集</el-link>
      </li>
    </vue-context>
  </el-container>
</template>

<script>
// import { selectDruidList, selectDruidTableList, selectDruidTableFieldList } from '@/api/datasource'
import SqlDataSetDialog from './dialog/SqlDataSetDialog'
import VueContext from 'vue-context'
import 'vue-context/dist/css/vue-context.css'
import { selectDruidList } from '@/api/datasource'

export default {
  name: 'DataSetProperty',
  components: {
    SqlDataSetDialog,
    VueContext
  },
  props: {
    dataSetValue: {
      type: Object,
      required: true
    },
    refreshChildPropertyPanel: {
      type: Function,
      required: true
    },
  },
  data: function() {
    return {
      height: 100,
      datasources: [],
      datasets: [],
      datasource: null,
      dataset: null,
      sqlDataSetValue: {
        dialogVisible: false
      }
    }
  },
  watch: {
    dataSetValue: function(val) {
      this.init(val)
    }
  },
  mounted: function() {
    this.height = this.getHeight()
    window.onresize = () => {
      const that = this
      setTimeout(function() {
        that.height = that.getHeight()
      }, 100)
    }
    this.init(this.dataSetValue)
  },
  methods: {
    init(val) {
      if (val.context && val.context.reportDef) {
        const datasources = val.context.reportDef.datasources
        selectDruidList({}).then(res => {
          const druidList = res.data || []
          for (const index in druidList) {
            const druid = druidList[index]
            const obj = datasources.find(item => item.code === druid.code)
            if (!obj) {
              datasources.push({
                code: druid.code,
                type: 'jdbc',
                name: druid.name,
                datasets: []
              })
            }
          }
          this.datasources = datasources
        })
      }
    },
    getHeight() {
      const ele = document.getElementById('dataset_container')
      const height = document.documentElement.clientHeight
      const top = ele.getBoundingClientRect().top
      return height - top
    },
    menu(e, datasource, dataset) {
      this.datasource = datasource
      this.dataset = dataset
      this.$refs.menu.open(e)
    },
    expand(obj) {
      if (obj.expanded) {
        this.$set(obj, 'expanded', false)
      } else {
        this.$set(obj, 'expanded', true)
      }
    },
    addDataSet() {
      this.sqlDataSetValue = {
        dialogVisible: true,
        edit: false,
        code: this.datasource.code,
        context: this.dataSetValue.context
      }
    },
    editDataSet: function() {
      this.sqlDataSetValue = {
        dialogVisible: true,
        edit: true,
        dataset: JSON.parse(JSON.stringify(this.dataset)),
        code: this.datasource.code,
        context: this.dataSetValue.context
      }
    },
    removeDataSet: function() {
      this.$confirm('确定删除数据集?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const datasources = this.dataSetValue.context.reportDef.datasources || []
        for (const ds of datasources) {
          const arr = ds.datasets
          for (const index in arr) {
            if (arr[index].name === this.dataset.name) {
              arr.splice(index, 1)
            }
          }
        }
        this.init(this.dataSetValue)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    addField(dataset, field) {
      const context = this.dataSetValue.context
      const selected = context.hot.getSelected()
      if(!selected) {
          return null
      }
      const startRow = selected[0]
      const startCol = selected[1]
      const endRow = selected[2]
      const endCol = selected[3]
      let cellDef = context.getCell(startRow, startCol)
      if (cellDef.value.type !== 'dataset') {
        context.removeCell(cellDef)
        cellDef = {
          value: {
            type: 'dataset',
            conditions: []
          },
          rowNumber: cellDef.rowNumber,
          columnNumber: cellDef.columnNumber,
          cellStyle: cellDef.cellStyle
        }
        context.addCell(cellDef)
      }
      cellDef.expand = 'Down'
      const value = cellDef.value
      value.aggregate = 'group'
      value.datasetName = dataset
      value.property = field
      value.order = 'none'

      let text = value.datasetName + '.' + value.aggregate + '('
      const prop = value.property
      text += prop + ')'
      context.hot.setDataAtCell(startRow, startCol, text)
      this.refreshChildPropertyPanel(startRow, startCol, endRow, endCol)
    }
  }
}
</script>

<style>
  .v-context, .v-context ul {
    border: 0px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }

  .dataset-tree-node .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>
